<template>
  <div class="bigbox">
    <!--轮播图-->
    <div class="bananer">
      <el-carousel height="460px">
        <el-carousel-item v-for="(item, index) in navList" :key="index">
          <img :src="'http://106.15.179.105:3000/' + item.imgPath" />
        </el-carousel-item>
      </el-carousel>
    </div>
    <!--data数据-->
    <div class="listbox">
      <!--手机-->
      <div class="xbox">
        <div class="title">手机</div>
        <div class="mobelbox">
          <div class="mobelboxleft">
            <img
              src="http://106.15.179.105:3000/public/imgs/phone/phone.png"
              alt=""
            />
          </div>
          <div class="mobelboxright">
            <mi-list :mobellist="mobleList"></mi-list>
          </div>
        </div>
      </div>
      <!--家电-->
      <div class="xbox">
        <div class="hadline">
          <div class="title">家电</div>
          <div class="titles">
            <div
              :class="applianceActive == 1 ? 'active' : ''"
              @mouseover="appliancechange($event, 1)"
            >
              <span>热门</span>
            </div>
            <div
              :class="applianceActive == 2 ? 'active' : ''"
              @mouseover="appliancechange($event, 2)"
            >
              <span>电视影音</span>
            </div>
          </div>
        </div>
        <div class="mobelbox">
          <div class="mobelboxleft">
            <ul>
              <li>
                <img
                  src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo1.png"
                />
              </li>
              <li>
                <img
                  src="http://106.15.179.105:3000/public/imgs/appliance/appliance-promo2.png"
                />
              </li>
            </ul>
          </div>
          <div class="mobelboxright">
            <mi-list :mobellist="appliancesData"></mi-list>
          </div>
        </div>
      </div>
      <!--配件-->
      <div class="xbox">
        <div class="hadline">
          <div class="title">配件</div>
          <div class="titles">
            <div
              :class="partsActive == 1 ? 'active' : ''"
              @mouseover="partschange($event, 1)"
            >
              热门
            </div>
            <div
              :class="partsActive == 2 ? 'active' : ''"
              @mouseover="partschange($event, 2)"
            >
              保护套
            </div>
            <div
              :class="partsActive == 3 ? 'active' : ''"
              @mouseover="partschange($event, 3)"
            >
              充电器
            </div>
          </div>
        </div>
        <div class="mobelbox">
          <div class="mobelboxleft">
            <ul>
              <li>
                <img
                  src="http://106.15.179.105:3000/public/imgs/accessory/accessory-promo1.png"
                />
              </li>
              <li>
                <img
                  src="http://106.15.179.105:3000/public/imgs/accessory/accessory-promo2.png"
                />
              </li>
            </ul>
          </div>
          <div class="mobelboxright">
            <mi-list :mobellist="partssData"></mi-list>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import homeAPI from "../../api/index";
export default {
  components: {},
  name: "",
  data() {
    return {
      navList: {},

      mobleList: [], //手机数据

      applianceData: [], //家电热门数据
      TVData: [], //电视数据

      partsData: [], //配件热门数据
      protectorData: [], //保护套数据
      chargerData: [], //充电器数据

      appliancesData: [], //家电总数据
      partssData: [], //配件总数据

      applianceActive: 1, //家电当前选中标识 1 2
      partsActive: 1, //配件当前选中标识 1 2 3
    };
  },
  created() {
    //轮播图
    this.getNav();
    //手机版块
    this.getProduct("mobleList", { categoryName: "手机" });
    //家电版块
    this.getProduct(
      "appliancesData",
      { categoryName: ["电视机", "空调", "洗衣机"] },
      true
    );
    this.getProduct("TVData", { categoryName: "电视机" });
    //配件版块
    this.getProduct(
      "partssData",
      { categoryName: ["保护套", "保护膜", "充电器", "充电宝"] },
      true
    );
    this.getProduct("protectorData", { categoryName: "保护套" });
    this.getProduct("chargerData", { categoryName: "充电器" });
  },
  methods: {
    //轮播图数据
    async getNav() {
      let res = await homeAPI.getSwiper().then((res) => {
        // console.log(res);
        this.navList = res.data.carousel;
      });
    },

    //获取商品数据
    async getProduct(dataName, data, hostData) {
      // dataName是created里方法里以一个形参;
      // data是数据
      // apiName是判断是否获取热门数据
      if (hostData) {
        var { data: res } = await homeAPI.getHostList(data);
      } else {
        var { data: res } = await homeAPI.getShopList(data);
      }
      this[dataName] = res.Product;
      // console.log(this.appliancesData);
    },
    //家电
    appliancechange(e, val) {
      this.applianceActive = val;
    },
    //配件
    partschange(e, val) {
      this.partsActive = val;
    },
  },
  watch: {
    //家电
    applianceActive(val) {
      // console.log(val);
      if (this.applianceData.length == 0) {
        console.log(this.appliancesData);
        this.applianceData = this.appliancesData;
        // this.appliancesData = this.applianceData;
      }
      this.appliancesData = val === 1 ? this.applianceData : this.TVData;
    },
    //配件
    partsActive(val) {
      // console.log(this.partsData);
      if (this.partsData.length == 0) {
        this.partsData = this.partssData;
      }
      let lcData = null;
      switch (val) {
        case 1:
          lcData = this.partsData;
          break;
        case 2:
          lcData = this.protectorData;
          break;
        case 3:
          lcData = this.chargerData;
          break;
      }
      this.partssData = lcData;
    },
  },
};
</script>

<style lang="scss" scoped>
.bigbox {
  width: 100%;
  .bananer {
    width: 1225px;
    margin: 15px auto;
    el-carousel {
      width: 100%;
      height: 460px;
      el-carousel-item {
        width: 100%;
        height: 460px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
  .listbox {
    width: 100%;
    height: 100%;
    margin: 15px 0;
    background: #f5f5f5;
    .xbox {
      width: 1225px;
      height: 100%;
      margin: 0 auto;
      .hadline {
        display: flex;
        justify-content: space-between;
        .titles {
          display: flex;
          align-items: center;
          padding-right: 10px;
          div {
            margin: 0 0 0 30px;
            height: 48px;
            line-height: 58px;
            &.active,
            &:hover {
              color: #ff6700;
              border-bottom: 2px solid #ff6700;
            }
          }
        }
      }
      .title {
        font-size: 22px;
        font-weight: 200;
        line-height: 58px;
        color: #333;
      }
      .mobelbox {
        height: 614px;
        display: flex;
        .mobelboxleft {
          width: 234px;
          height: 100%;
          ul {
            list-style: none;
          }
          img {
            width: 100%;
            height: 100%;
          }
        }
        .mobelboxright {
          flex: 1;
          height: 100%;
        }
      }
    }
  }
}
</style>
